.login {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .header {
        background: #ffffff;
        padding: 24px 12px;
        color: #000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .content {
        display: flex;
        align-content: center;
        justify-content: center;

        .card {
            width: 400px;
            background: #ffffff;
            border-radius: 6px;
            display: flex;
            align-content: center;
            justify-content: center;
            flex-wrap: wrap;
            padding: 48px;

            .title {
                width: 100%;
                font-weight: bold;
                text-align: center;
                font-size: 17px;
            }

            .code {
                width: 100%;
                display: flex;
                margin-top: 24px;
                justify-content: space-between;
                .codeBtn{
                    margin-left: 12px;
                }
            }

            .input {
                margin-top: 24px;
            }

            .button {
                width: 100%;
                margin-top: 24px;
            }

            .operation {
                width: 100%;
                margin-top: 24px;
                display: flex;
                justify-content: flex-end;
                font-size: 12px;

                div {
                    cursor: pointer;
                }
            }
        }
    }

    .footer {
        display: flex;
        background: #ffffff;
        padding: 24px;
        justify-content: center;
        flex-wrap: wrap;

        .item {
            flex-basis: 100%;
            display: flex;
            justify-content: center;
        }

        .link {
            display: flex;

            div {
                margin: 0 12px;
            }
        }

        .copy {
            margin: 24px 0;
        }
    }
}
